<template>
    <view class="page">
        <view class="uni-padding-wrap uni-common-mt">
            <!--<view class="uni-title">
                <uni-icon size="16" type="info"></uni-icon>说明 :
            </view>-->
            <view class="input-view">
                <uni-icon type="search" size="22" color="#666666" />
                <input confirm-type="search" class="input" type="text" placeholder="搜索" @confirm="confirm" />
            </view>
        </view>

        <view class="uni-product-list">
            <view class="uni-product" v-for="(book,index) in bookList" :key="index">
                <view class="image-view">
                    <image v-if="renderImage" class="uni-product-image" :src="book.cover"></image>
                </view>
                <view class="uni-product-title">{{book.title}}</view>
                <!--<view class="uni-product-price">
                    <text class="uni-product-price-favour">￥{{product.originalPrice}}</text>
                    <text class="uni-product-price-original">￥{{product.favourPrice}}</text>
                    <text class="uni-product-tip">{{product.tip}}</text>
                </view>-->
            </view>
            <!--<span class="icon-add icon"></span>-->
            <!--<shelf-image :data="subItem" :isEditMode="isEditMode"></shelf-image>-->
            <view class="uni-product">
                <view class="image-view">
                    <!--选择添加的按钮-->
                    <!--<uni-icon type="plusempty" class="uni-icon foradd" size="66"></uni-icon>-->
                    <image class="uni-product-image" :src="addImg"></image>

                </view>

            </view>
        </view>
    </view>
</template>
<script>
    import uniIcon from '@/components/uni-icon/uni-icon.vue';
    import ShelfImage from "@/components/shelf/shelfImage"

    export default {
        components: {
            uniIcon,
            ShelfImage
        },
        data() {
            return {
                title: 'book-shelf',
                bookList:[],
                renderImage: false,
                addImg:"../../../static/img/add.jpg",
                scrollBottom: 0,     // 20190624
                isEditMode: false,
                subItem:[]
            };
        },
        onReady() {
            this.setStyle(0,true);
            this.setStyle(1,true,'9');

        },
        methods: {
            /**
             * 修改导航栏buttons
             * index[number] 修改的buttons 下标索引，最右边索引为0
             * show[boolean] 显示还是隐藏角标或者红点
             * text[string] 需要修改的角标的text 内容 ，如果定义redDot 此参数无效 ，如果定义badgeText请设置具体，如果不用输入
             */
            setStyle(index, show,text) {
                let pages = getCurrentPages();
                let page = pages[pages.length - 1];
                // #ifdef APP-PLUS
                let currentWebview = page.$getAppWebview();
                if(show){
                    if(index === 0){
                        currentWebview.showTitleNViewButtonRedDot({index:index,text:text})
                    }else{
                        currentWebview.setTitleNViewButtonBadge({index:index,text:text})
                    }
                }else{
                    if(index === 0){
                        currentWebview.hideTitleNViewButtonRedDot({index:index})
                    }else{
                        currentWebview.removeTitleNViewButtonBadge({index:index})
                    }
                }

                // #endif
            },
            confirm() {
                uni.showToast({
                    title: '搜索'
                });
            },
            loadData(action = 'add') {
                const data = [
                    {
                        cover: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                        title: 'Apple iPhone X 256GB 深空灰色',
                        originalPrice: 9999,
                        favourPrice: 8888,
                        tip: '自营'
                    },
                    {
                        cover: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
                        title: 'Apple iPad 平板电脑',
                        originalPrice: 3499,
                        favourPrice: 3399,
                        tip: '优惠'
                    },
                    {
                        cover: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
                        title: 'Apple MacBook Pro 13.3英寸笔记本电脑',
                        originalPrice: 12999,
                        favourPrice: 10688,
                        tip: '秒杀'
                    }
                ];

                if (action === 'refresh') {
                    this.bookList = [];
                }

                data.forEach(item => {
                    this.bookList.push(item);
                });
            }
        },
        onNavigationBarButtonTap(e) {
            uni.showToast({
                title: e.index === 0 ? '你点了消息按钮' : '你点了关注按钮',
                icon: 'none'
            });
            // 取消红点或者角标
            this.setStyle(e.index,false);
        },
        onLoad() {
            this.loadData();
            /*this.bookList = [
                {
                    'id': 1,
                    'fileName': '2016_Book_PhysiologyPsychoacousticsAndCo',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg',
                    'title': 'Physiology, Psychoacoustics and Cognition in Normal and Impaired Hearing',
                    'author': 'Pim van Dijk',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2016_Book_PhysiologyPsychoacousticsAndCo',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 2,
                    'fileName': '2017_Book_HormonesMetabolismAndTheBenefi',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg',
                    'title': 'Hormones, Metabolism and the Benefits of Exercise',
                    'author': 'Bruce Spiegelman',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2017_Book_HormonesMetabolismAndTheBenefi',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 3,
                    'fileName': '2018_Book_NicotinicAcetylcholineReceptor',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-981-10-8488-1_CoverFigure.jpg',
                    'title': 'Nicotinic Acetylcholine Receptor Signaling in Neuroprotection',
                    'author': 'Akinori Akaike',
                    'publisher': 'Springer Singapore',
                    'bookId': '2018_Book_NicotinicAcetylcholineReceptor',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 4,
                    'fileName': '2018_Book_Self-AssembledMoleculesNewKind',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-65639-7_CoverFigure.jpg',
                    'title': 'Self-Assembled Molecules – New Kind of Protein Ligands',
                    'author': 'Irena Roterman',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2018_Book_Self-AssembledMoleculesNewKind',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }
            ]*/
            setTimeout(()=> {
                this.renderImage = true;
            }, 300);
        },
        onPullDownRefresh() {
            this.loadData('refresh');
            // 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 2000);
        },
        onReachBottom() {
            this.loadData();
            this.bookList = [
                {
                    'id': 1,
                    'fileName': '2016_Book_PhysiologyPsychoacousticsAndCo',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg',
                    'title': 'Physiology, Psychoacoustics and Cognition in Normal and Impaired Hearing',
                    'author': 'Pim van Dijk',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2016_Book_PhysiologyPsychoacousticsAndCo',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 2,
                    'fileName': '2017_Book_HormonesMetabolismAndTheBenefi',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg',
                    'title': 'Hormones, Metabolism and the Benefits of Exercise',
                    'author': 'Bruce Spiegelman',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2017_Book_HormonesMetabolismAndTheBenefi',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 3,
                    'fileName': '2018_Book_NicotinicAcetylcholineReceptor',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-981-10-8488-1_CoverFigure.jpg',
                    'title': 'Nicotinic Acetylcholine Receptor Signaling in Neuroprotection',
                    'author': 'Akinori Akaike',
                    'publisher': 'Springer Singapore',
                    'bookId': '2018_Book_NicotinicAcetylcholineReceptor',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }, {
                    'id': 4,
                    'fileName': '2018_Book_Self-AssembledMoleculesNewKind',
                    'cover': 'http://47.99.166.157/book/res/img/Biomedicine/978-3-319-65639-7_CoverFigure.jpg',
                    'title': 'Self-Assembled Molecules – New Kind of Protein Ligands',
                    'author': 'Irena Roterman',
                    'publisher': 'Springer International Publishing',
                    'bookId': '2018_Book_Self-AssembledMoleculesNewKind',
                    'category': 12,
                    'categoryText': 'Biomedicine',
                    'language': 'en',
                    'selected': false,
                    'private': false,
                    'cache': false,
                    'haveRead': 0
                }
            ]
        }
    };
</script>

<style>
    .input-view {
        width: 92%;
        display: flex;
        background-color: #e7e7e7;
        height: 30px;
        border-radius: 15px;
        padding: 0 4%;
        flex-wrap: nowrap;
        margin: 7px 0;
        line-height: 30px;
    }

    .input-view .uni-icon {
        line-height: 30px !important;
    }

    .input-view .input {
        height: 30px;
        line-height: 30px;
        width: 94%;
        padding: 0 3%;
    }
    .book-shelf-list {
        position: absolute;
        top: px2rem(93.5);
        left: 0;
        z-index: 100;
    }
    .book-shelf-scroll-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 101;
        background: white;
    }
    .book-img-wrapper {
        width: 100%;
    @include shelfImgHeight;
        box-shadow: px2rem(2) px2rem(2) px2rem(6) px2rem(2) rgba(200, 200, 200, .3);
    @include center;
        border: px2rem(1) solid #eee;
        box-sizing: border-box;
    }
    .book-img {
        width: 200upx;
        height: 100upx;
    }
    .book-title {
        margin-top: px2rem(10);
    }
    .title-small {
        font-size: 0.32rem;
        line-height: 0.4rem;
        max-height: 0.8rem;
        color: #444;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: keep-all;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
    }
</style>
